<template>
<div class="my-search">
  <el-select v-model="inputValue"
             filterable allow-create
             default-first-option
             :placeholder="placeholderList[new Date().getSeconds()%(placeholderList.length)]"
             @change="handleChange">
    <el-option
      v-for="item in datasOptions"
      :key="item.id"
      :label="item.label"
      :value="item.id">
    </el-option>
  </el-select>
</div>
</template>

<script>
import {getDatasOptions} from '@/utils/index.js'
export default {
  data () {
    return {
      inputValue: null,
      // 随机下拉框提示语
      placeholderList:[
        '今天吃点什么呢？',
        '谁是今天的营养之王？',
        '粽子有哪些营养呢？'
      ],
      datasOptions: []
    }
  },
  async mounted () {
    // 获取options下拉框列表
    this.datasOptions = await getDatasOptions()
    console.log(this.datasOptions)
  },
  methods: {
    handleChange (val) {
      // 用query将下拉框获取的值传给home页面
      this.$router.push({path: '/home', query: {inputValue: val}})
    }
  }
}
</script>

<style lang="less">
.my-search {
  width: 100%;
  height: 100%;
  background: #ccc;
  position: relative;
  .el-select {
    width: 300px;
    height:40px;
    position: absolute;
    top: 30%;
    left: 50%;
    margin-left: -150px;
  }
}
</style>